<template>
    <div>
      <van-nav-bar title="影院" ref='navbar' @click-left="handleLeft" @click-right="handleRight">
        <template #right>
        <van-icon name="search" size="24" color="black" />
        </template>
        <template #left>
        {{$store.state.cityName}}<van-icon name="arrow-down" size="12" color="black"/>
        </template>
      </van-nav-bar>

       <div class="box" :style="{
            height:height
       }">
           <ul>
            <li v-for="data in cinemaList" :key="data.cinemaId">
               <div class="left">
                   <div class="cinema_name"> {{data.name}}</div>
                   <div class="cinema_address">{{data.address}} </div>
               </div>
               <div class="right">
                    <div style="color:red;">￥{{data.lowPrice/100}}起</div>
                    <div>距离未知</div>
               </div>
            </li>
           </ul>
       </div>
    </div>
</template>
<script>
import { mapState, mapActions, mapMutations } from 'vuex'
// import http from '@/util/http'
import BetterScroll from 'better-scroll'
console.log(mapState(['cinemalist']))
export default {
  data () {
    return {
      height: '0px'
    }
  },
  methods: {
    ...mapActions(['getCinemaData']),
    ...mapMutations(['clearCinema']),
    handleLeft () {
      this.$router.push('/city')
      // 清空缓存的数组
      // this.$store.commit('clearCinema')
      this.clearCinema()
    },
    handleRight () {
      this.$router.push('/cinemas/search')
    }
  },
  // computed: {
  //   cinemaList () {
  //     return this.$store.state.cinemaList
  //   }
  // },
  computed: {
    ...mapState(['cinemaList', 'cityId', 'cityName'])
  },
  mounted () {
    //   动态计算高度
    this.height = document.documentElement.clientHeight - document.documentElement.querySelector('footer').offsetHeight - this.$refs.navbar.$el.offsetHeight + 'px'

    // 分发
    if (this.cinemaList.length === 0) {
      this.$store.dispatch('getCinemaData', this.cityId).then(res => {
        this.$nextTick(() => {
          new BetterScroll('.box', {
            scrollbar: {
              fade: true
            }
          })
        })
      })
    } else {
      console.log('缓存')
      this.$nextTick(() => {
        new BetterScroll('.box', {
          scrollbar: {
            fade: true
          }
        })
      })
    }

    // http({
    //   url: `/gateway?cityId=${this.$store.state.cityId}&ticketFlag=1&k=2407439`,
    //   headers: {
    //     'X-Host': 'mall.film-ticket.cinema.list'
    //   }
    // }).then(res => {
    // //   console.log(res.data.data.cinemas)
    //   this.cinemasList = res.data.data.cinemas
    //   //   console.log(document.getElementsByTagName('li').length)
    //   //   new BetterScroll('.box')
    //   this.$nextTick(() => {
    //     // console.log(document.getElementsByTagName('li').length)
    // new BetterScroll('.box', {
    //   scrollbar: {
    //     fade: true
    //   }
    // })
    //   })
    // })
  }
}
</script>
<style lang="scss" scoped>

    .box{
       width: 100%;
        height: 18.75rem;
        overflow: hidden;
        // 修正滚动条的位置
        position: relative;
    }
    ul{
        li{
            padding: .9375rem;
            display: flex;
            justify-content: space-between;

            .left{
                width: 14.375rem;
                .cinema_name{
                    font-size: .9375rem;
                    color: #191a1b;
                }
                .cinema_address{
                    color: #797d82;
                    font-size: 12px;
                    margin-top: 5px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
    }
</style>
